<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业天智能大模型聊天平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
    <!-- 顶部横栏 -->
    <div class="top-bar">
        <!-- 左侧内容 - 居底部 -->
        <div class="top-bar-left">
            <div class="company-info">
                <div class="company-logo">🏢</div>
                <div class="company-name">业天智能大模型聊天平台</div>
            </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="top-bar-right">
            <div class="user-info">
                <div class="user-avatar">👤</div>
                <div class="user-name">贵宾</div>
            </div>
            <div class="auth-buttons">
                <button class="login-btn">登录</button>
                <button class="register-btn">注册</button>
            </div>
        </div>
    </div>
    
    <div class="app-container">
        <!-- 左侧工具栏 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>话题列表</h2>
                <button id="new-topic-btn" class="new-topic-btn">新建话题</button>
            </div>
            
            <!-- 话题分类列表 -->
            <div class="topics-container">
                {% for category in ['今天', '昨天', '以前'] %}
                    {% if categorized_topics[category] %}
                        <div class="topic-category">
                            <h3>{{ category }}</h3>
                            <div class="topic-list">
                                {% for topic in categorized_topics[category] %}
                                    <div class="topic-item {{ 'active' if current_topic and topic.id == current_topic.id else '' }}" data-topic-id="{{ topic.id }}">
                                        <div class="topic-header">
                                            <span class="topic-title">{{ topic.title }}</span>
                                            <div class="topic-actions">
                                                <button class="edit-topic-btn" data-topic-id="{{ topic.id }}">✏️</button>
                                                <button class="delete-topic-btn" data-topic-id="{{ topic.id }}">🗑️</button>
                                            </div>
                                        </div>
                                        <div class="topic-time">{{ topic.created_at.split(' ')[1] }}</div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        
        <!-- 主聊天区域 -->
        <div class="chat-container">
            <div class="chat-header">
                <h1>当前话题：</h1>
                {% if current_topic %}
                    <div class="chat-topic-info">
                        <span class="current-topic-title">{{ current_topic.title }}</span>
                    </div>
                {% endif %}
            </div>
            
            <div class="chat-messages" id="chat-messages">
                {% if not current_topic %}
                    <div class="welcome-message">
                        <p>欢迎使用业天智能平台！请在左侧选择或新建一个话题开始聊天。</p>
                    </div>
                {% else %}
                    {% for message in current_topic.messages %}
                        <div class="message {{ message.role }}">
                            <div class="message-content">{{ message.content.replace('\n', '<br>')|safe }}</div>
                            <div class="message-time">
                                {{ message.timestamp.split(' ')[1] }}
                            </div>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
            
            <div class="chat-input-container">
                <input type="text" id="user-input" placeholder="输入您的问题..." autocomplete="off" {% if not current_topic %}disabled{% endif %}>
                <button id="send-btn" {% if not current_topic %}disabled{% endif %}>发送</button>
            </div>
        </div>
    </div>
    
    <!-- 新建话题模态框 -->
    <div id="new-topic-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>新建话题</h2>
            <form id="new-topic-form" action="{{ url_for('new_topic') }}" method="post">
                <input type="text" name="title" placeholder="话题标题" required>
                <button type="submit">创建</button>
            </form>
        </div>
    </div>
    
    <!-- 编辑话题标题模态框 -->
    <div id="edit-topic-modal" class="modal">
        <div class="modal-content">
            <span class="close-modal">&times;</span>
            <h2>编辑话题标题</h2>
            <form id="edit-topic-form" method="post">
                <input type="hidden" id="edit-topic-id" name="topic_id">
                <input type="text" id="edit-topic-title" name="title" placeholder="新话题标题" required>
                <button type="submit">保存</button>
            </form>
        </div>
    </div>
    
    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>